<template>
  <div ref="pieChart03" class="pie-chart-03 chart"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const pieChart03 = ref(null);
const echarts = inject("$echarts");

//  颜色集合
// let colorList = [ "#14C7F8", "#15AAF1", "#24B462", "#FFD52E", "#F97638", "#FF2919", "#fff"];
let total = 0; // 设备总数 遍历originalData进行累加
let originalData = [
  { value: 1, name: "东区一层" },
  { value: 2, name: "东区二层" },
  { value: 3, name: "东区三层" },
  { value: 5, name: "东区四层" },
  { value: 1, name: "东区五层" },
  { value: 2, name: "西区一层" },
  { value: 4, name: "西区二层" },
  { value: 4, name: "西区三层" },
  { value: 4, name: "西区四层" },
  { value: 4, name: "地下一层" },
];
let nameData = [];
let abnormal = 0;
for (let i = 0; i < originalData.length; i++) {
  nameData.push(originalData[i].name);
  total = total + originalData[i].value; // 累加计算设备总数
}
let item = {
  value: total,
  name: "设备总数",
};
const option = {
  compCode: "C202312002",
  backgroundColor: "rgba(3,23,30,1)",
  tooltip: {
    trigger: "item",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    formatter: "{b}: {c}",
  },
  title: [
    {
      text: "{value|" + total + "}",
      // text: item.value,
      left: "32%",
      top: "46%",
      textAlign: "center",
      textBaseline: "middle",
      textStyle: {
        // fontSize: 50,
      },
      textStyle: {
        rich: {
          value: {
            color: "#fff",
            fontWeight: "bold",
            fontSize: 35,
          },
        },
      },
    },
    {
      text: item.name,
      left: "32%",
      top: "53%",
      textAlign: "center",
      textBaseline: "middle",
      textStyle: {
        color: "#fff",
        fontWeight: "normal",
        fontSize: 16,
      },
    },
  ],
  legend: {
    icon: "circle",
    type: "plain",
    show: true,
    orient: "vertical",
    top: "center",
    right: "9%",
    height: 330,
    itemGap: 48,
    align: "left",
    textStyle: {
      color: "#FFF",
      fontSize: 14,
    },
    formatter: function (name) {
      return name;
    },
    data: nameData,
  },
  series: [
    // 第1层
    {
      center: ["32%", "50%"],
      emphasis: {
        scale: false,
      },
      radius: ["45%", "55%"],
      name: "pie",
      type: "pie",
      selectedMode: "single",
      selectedOffset: 16, //选中是扇区偏移量
      clockwise: true,
      startAngle: 90,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      itemStyle: {
        borderWidth: 9,
        borderColor: "rgba(3,23,30,1)",
      },
      emphasis: {
        borderWidth: 0,
        shadowBlur: 5,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.2)",
      },
      data: originalData,
    },

    // 第2层
    {
      name: "",
      type: "gauge",
      splitNumber: 90, //刻度数量
      radius: "40%", //图表尺寸
      center: ["32%", "50%"],
      zlevel: 10,
      startAngle: 90,
      endAngle: -269.9999,
      axisLine: {
        show: false,
        lineStyle: {
          width: 0,
          shadowBlur: 0,
          color: [[1, "#253D7B"]],
        },
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "auto",
          width: 2,
        },
        length: 20,
        splitNumber: 5,
      },
      splitLine: {
        show: true,
        length: 10,
        lineStyle: {
          color: "auto",
          width: 5, // 设置分隔线的粗细
        },
      },
      axisLabel: {
        show: false,
      },
      pointer: {
        //仪表盘指针
        show: 0,
      },
      detail: {
        show: 0,
      },
    },
    {
      //内圈
      type: "pie",
      data: [100],
      z: 3,
      radius: ["0%", "28.5%"],
      center: ["32%", "50%"],
      itemStyle: {
        color: "rgba(35,71,121,1)",
      },
      silent: true,
      labelLine: {
        normal: {
          show: false,
        },
      },
      label: {
        normal: {
          show: false,
          position: "center",
          textStyle: {
            fontSize: 14,
            color: "#000",
          },
        },
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(pieChart03.value);
  chart.setOption(option);
});
</script>
